<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../plugin/layui-v2.2.5/layui/css/layui.css">
  <!-- 教师应交材料页面 -->
</head>
<body>
  <div class="layui-row">
    <button id="addNew" data-method="setTop" class="layui-btn" style="float: left;margin-left: 10px">新建</button>
    <button type="button" class="layui-btn" id="uploadFile">
      <i class="layui-icon">&#xe67c;</i>上传文件
    </button>

  </div>
  <div>
    <table class="layui-hide" id="demo"></table>  
  </div>
       

          
<script src="../plugin/layui-v2.2.5/layui/layui.js"></script>
<script src="../plugin/jquery-3.1.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['table','layer','upload'], function(){
  var table = layui.table;
  
  
  
  
  //展示已知数据
  table.render({
    elem: '#demo'
    ,cols: [[ //标题栏
      {field: 'id', title: '课程名', width: 80, sort: true}
      ,{field: 'username', title: '上课教师', width: 120}
      ,{field: 'email', title: '工号', minWidth: 100}
      ,{field: 'sign', title: '课程授课班级', minWidth: 100}
      ,{field: 'sex', title: '课程材料类型', width: 80}
      ,{field: 'city', title: '授课学期', width: 100}
      ,{field: 'experience', title: '备注', width: 80, sort: true}
    ]]
    ,data: [{
      "id": "10001"
      ,"username": "杜甫"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "116"
      ,"ip": "192.168.0.8"
      ,"logins": "108"
      ,"joinTime": "2016-10-14"
    }, {
      "id": "10002"
      ,"username": "李白"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
      ,"LAY_CHECKED": true
    }, {
      "id": "10003"
      ,"username": "王勃"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "65"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }, {
      "id": "10004"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "666"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }, {
      "id": "10005"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "86"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }, {
      "id": "10006"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }, {
      "id": "10007"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "16"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }, {
      "id": "10008"
      ,"username": "贤心"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "106"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
    }]
    ,skin: 'line' //表格风格
    ,even: true
    ,page: true //是否显示分页
    ,limits: [5, 7, 10]
    ,limit: 5 //每页默认显示的数量
  });

  var active = {
    setTop: function(){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '新增课程材料'
        ,area: [' 1000px','450px']
        ,shade: 0
        ,maxmin: true
        ,offset: 'auto'
        ,content: 'file:///C:/Users/bohan/Desktop/cma/view/addNew.html'
        ,btn: ['关闭'] //只是为了演示
        ,yes: function(){
          layer.closeAll();
        }
        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
        ,cancel: function(index, layero){ //关闭窗户回调
          if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            layer.close(index)
            }
             return false;  
        }

      });
    }
  };

  $('.layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });

  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#uploadFile' //绑定元素
    ,url: '/upload/' //上传接口
    ,accept: 'file' //普通文件
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });

});


</script>

</body>
</html>